<template>
  <div>
    <!-- <h3>银行卡余额：{{ money }}</h3>
    <button @click="money = money + 20000">发工资</button>
    <button @click="money = money - 15">干饭</button>
    <hr>
    <div>{{ obj }}</div>
    <button @click="obj.age++">过了一年</button> -->
    <hr>
    <div>{{ person }}</div>
    <button @click="person.name = '好人'">偷偷改名</button>
    <button @click="person.age = 80">偷偷改年纪</button>
    <button @click="person.hobby.name = '前端'">弃恶从善</button>
  </div>
</template>

<script>
export default {
  // 组件的配置项中，除了data是函数，其他一律是对象
  data () {
    return {
      // 需求：只要我卡的钱，变化了，你就发个短信通知一下我~
      // money: 100,
      // obj: {
      //   name: '小花',
      //   age: 18
      // },

      // 24小时，全方位，100% 监控
      person: {
        name: '嫌疑犯',
        age: 22,
        desc: '喜欢蹦迪~ 踩点~',
        hobby:{
          name:'测试'
        }
      }
    }
  },
  watch: {
    // 1. 监视简单类型
    // 提供数据变化的处理函数, newVal 变换后的值， oldValue之前的值
    'money' (newVal, oldVal) {
      console.log('尊敬的用户，您的银行卡余额变更为：', newVal, '原：', oldVal)
    },
    // 监视小花的年纪
    'obj.age' (newVal, oldVal) {
      console.log('小花，你变了，年纪:', newVal, '之前：', oldVal)
    },

    // 2. 监视整个obj对象 （复杂类型） => 复杂类型中的任何一个属性变化了，我都要执行
    //    需要深度监视，需要写监视的完整写法
    // person (newVal, oldVal) {
    //   console.log(newVal, oldVal)
    // }
    person: {
      //组件一加载，就会调用一次handler
      immediate:true,
      //deep属性开启深度监听，可以监听到复杂数据类型堆里面的改变
      //正常情况下不推荐开启deep，除非需求需要
      deep:true,
      handler(newVal,oldVal) {
        console.log('我被调用了');
        console.log(newVal,oldVal);
      }
    }
  }
}
// 非业务需求：尽可能不要直接深度监视 => 相对消耗性能
// 如果是业务需求，就需要深度监视，就正常监视即可~
</script>

<style>

</style>